<script setup lang="ts">
import type { DataType } from '../../types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { useAppConfig } from '@vben/hooks';

import {
  Button,
  message,
  Popconfirm,
  Skeleton,
  Space,
  Spin,
} from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteBackup, getBackupList } from '#/api/admin/backup';
import Icon from '#/components/Icons';

const loading = ref<boolean>(true);
const spinLoading = ref(false);
const tableData = ref([]);
const gridOptions: VxeGridProps<DataType> = {
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50, showOverflow: true },
    { field: 'fileName', title: '文件名称', align: 'left' },
    { field: 'size', title: '大小（byte）' },
    { field: 'part', title: '卷数' },
    { field: 'compress', title: '格式' },
    { field: 'fdate', title: '备份时间' },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 240,
    },
  ],
  data: tableData.value,
  keepSource: true,
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        const { data } = await getBackupList();
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({
  gridOptions,
});

/**
 * 下载备份
 * @param data
 */
const handleDownBackup = (data: any) => {
  if (!data) {
    return;
  }
  function replaceLocalhostWith(url: string, newUrl: string): string {
    const localhostRegex = /^http:\/\/localhost(:\d+)?/;
    if (localhostRegex.test(url)) {
      return url.replace(localhostRegex, newUrl);
    }
    return url;
  }
  const { baseURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
  const link = document.createElement('a'); // 创建a标签
  link.style.display = 'none'; // 将a标签隐藏
  link.href = replaceLocalhostWith(data.downurl, baseURL); // 给a标签添加下载链接
  document.body.append(link);
  link.click(); // 执行a标签
};

/**
 * 删除备份
 */
const handleDelete = async (row: any) => {
  const { msg } = await deleteBackup({ time: row.time });
  message.success(msg);
  GridApi.query();
};
onMounted(async () => {
  if (typeof GridApi?.grid?.commitProxy === 'function') {
    GridApi.query();
  }
  loading.value = false;
});
</script>

<template>
  <Spin :full-screen="true" :spinning="spinLoading">
    <Skeleton :loading="loading">
      <Grid table-title="备份列表">
        <template #action="{ row }">
          <Space>
            <Popconfirm
              cancel-text="否"
              ok-text="是"
              title="确认下载？"
              @confirm="handleDownBackup(row)"
            >
              <Button type="primary">
                <template #icon>
                  <span class="anticon">
                    <Icon icon="ri:download-line" />
                  </span>
                </template>
                下载
              </Button>
            </Popconfirm>
            <Popconfirm
              cancel-text="否"
              ok-text="是"
              title="确认删除？"
              @confirm="handleDelete(row)"
            >
              <Button danger type="primary">
                <template #icon>
                  <span class="anticon">
                    <Icon icon="ri:delete-bin-line" />
                  </span>
                </template>
                删除
              </Button>
            </Popconfirm>
          </Space>
        </template>
      </Grid>
    </Skeleton>
  </Spin>
</template>
